<div :class="[$store.state.appPrefix + '-p-course-lesson-period', 'course-layout-content']" v-loading="isLoading">
  <div class="info-header oh">
    课时信息
    <el-button class="add-btn fr mt12" size="small"  icon="el-icon-plus" type="primary" @click="$handleAdd">创建课时</el-button>
  </div>
  <div class="content-list">
    <el-timeline v-if="periodList.length">
      <el-timeline-item v-for="(it, k) in periodList">
        <div class="dot" slot="dot">{{k + 1}}</div>
        <div class="period-item">
          <div class="period-con">
            <div class="period-title">{{it.lessonName}}</div>
            <div class="period-funs">
              <span v-for="sit in it.practiceProject" class="funs-it">
                <i class="el-icon-document"></i>
                {{FUN_IDS_OPTIONS[sit] ? FUN_IDS_OPTIONS[sit].codeName : '-'}}
              </span>
            </div>
          </div>
          <div class="period-actions">
            <el-switch
              v-model="it.isPublish"
              :width="68"
              active-color="#13ce66"
              :inactive-value="0"
              :active-value="1"
              @change="(newVal) => {$handleSwitch(newVal, it.id)}">
            </el-switch>
            <el-button size="small" @click="$handleEdit(it)">编辑</el-button>
            <el-button size="small" @click="$handleDelete(it)">删除</el-button>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>    
    <div v-else class="g-table-empty">
      <no-record tips="暂无课时"></no-record>
    </div>
  </div>
</div>
